<template>
  <div class="app-container">
    <Table ref="tableRef" v-bind="table" :allId="allId" :isAllCheck="isAllCheck" style="width: 100%;" @deleteItem="deleteItem"
           @pageChange="onTablePageChange" @activDelete="activDelete" @activEdit="activEdit"
           @showInfo="showInfo" @updateSelectAll="updateSelectAll" :disableHeaderCheckbox="disableHeaderCheckbox">
    </Table>

    <!-- info -->
    <el-drawer v-model="param.drawer" title="I am the title" :with-header="false">
      <span class="_before" v-if="typeDrawer==1">提箱记录详情</span>
      <span class="_before" v-else-if="typeDrawer==2">提箱记录编辑</span>
      <el-row class="marginTop20">
        <el-col :span="6" class="text-right">提箱单号：</el-col>
        <el-col :span="16">{{ drawerData.packingNo }}</el-col>
      </el-row>
      <el-row class="marginTop20" v-if="typeDrawer==2 && !isAgent">
        <el-col :span="6" class="text-right">成本价：</el-col>
        <el-col :span="16">
           <div class="input-sel" style="display: flex;">
                  <el-select v-model="drawerData.rentInCurrency" style="width: 60px" placeholder="请选择">
                          <el-option
                              v-for="item in feeCurrencyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                          />
                        </el-select>
                  <el-input :formatter="formatterNumberKo" :parser="formatterNumberKo" v-model="drawerData.rentInPrice" style="width: 130px" placeholder="请输入成本价" maxlength="20" />
                </div>
        </el-col>
      </el-row>
      <el-row class="marginTop10" v-if="typeDrawer==1 && !isAgent">
        <el-col :span="6" class="text-right">成本价：</el-col>
        <el-col :span="16">{{ drawerData.rentInCurrency == 'USD'?'$':'¥' }} {{ drawerData.rentInPrice }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">堆场名称：</el-col>
        <el-col :span="16">{{ drawerData.yardName }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">箱型：</el-col>
        <el-col :span="16">{{ formatBoxType(drawerData.boxType) }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">箱况：</el-col>
        <el-col :span="16">{{ formatBoxCondition(drawerData.boxCondition) }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">车牌号：</el-col>
        <el-col :span="16" v-if="typeDrawer==2 && isAgent"><el-input v-model.trim="drawerData.plateNumber"></el-input></el-col>
        <el-col :span="16" v-else>{{ drawerData.plateNumber }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">箱号：</el-col>
        <el-col :span="16">{{ drawerData.containerNo }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">提箱日期：</el-col>
        <el-col :span="16">{{ formatDate(drawerData.packingDate, 4) }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">提箱附件：</el-col>
        <el-col :span="16">
          <ImgUpload ref="addBoxFileRef" v-if="typeDrawer==2 && isAgent"  :urlList="drawerData.detailFileList" :displayType="2" :fileSize="3" :showNumber="6" :type="'jpg/png/jpeg/pdf/zip'" :limit="10" :drag="true"></ImgUpload>
          <showFile v-else :detailFileList="drawerData.detailFileList"></showFile>
        </el-col>
      </el-row>
       <template #footer v-if="typeDrawer==2">
            <div class="dialog-footer" style="display: flex; justify-content: center;">
               <!-- <el-button :icon="Refresh" @click="formReset()">重置</el-button> -->
               <el-button type="primary" @click="detaiClick">确定</el-button>
            </div>
         </template>
    </el-drawer>
    <!-- warning-->
    <el-dialog v-model="param.dialogVisible" title="系统提示" width="500">
      <span>确认删除？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="param.dialogVisible = false">取消</el-button>
          <el-button @click="param.dialogVisible = false">是的</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import Table from '@/components/table'
import {
  getBoxEastDetailTable,
  getPackingDetailData,
  deletePackingDetail,
  details,
  getboxDetailData
} from '@/api/orderManage/packingDetail'
import {computed, onMounted, onActivated, reactive, ref, watch, nextTick,inject} from 'vue';
import {formatDate, formatBoxType, formatBoxCondition,formatterNumberKo} from '@/utils'
import {ElMessage,ElMessageBox} from 'element-plus'
import showFile from '@/components/upload/showFile.vue'
import ImgUpload from '@/components/upload/uploadFiles-Images'
import {formatContainerNo} from '@/utils/mlpBox' // 格式化箱号
const isAgent=inject('isAgent') //当前等角色  true 货代角色  false 集装箱公司角色
const formData = inject('formData')

const param = reactive({
  value1: [],
  boxInfo: {code: '123456789', type: "40HQ", info: "无"},
  pageNum: 0,
  pageSize: 10,
  dialogTableVisible: false,
  drawer: false,
  dialogEditVisible: false,
  dialogVisible: false,
  dialogPathVisible: false,
  boxTypeOptions: [ // 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
    {value: '5', label: '40HQ',},
    {value: '10', label: '40GP',},
    {value: '15', label: '20HQ',},
    {value: '20', label: '20GP',},
  ],
  boxCaseOptions: [ //5-全新   10-次新  15-适货 20-混提(次新或者适货)
    {value: '15', label: '适货',},
    {value: '10', label: '次新',},
    //{ value: '20', label: '混提(次新或者适货)', },
    {value: '5', label: '全新',},
  ],
});
const feeCurrencyList=ref([
  {
    value:'CNY',
    label:'¥'
  },
  {
    value:'USD',
    label:'$'
  },
])
const table = reactive({
  // 列表数据（必传）
  data: [],
  // 表头内容（必传，注意格式）
  header: [
    {key: 'containerNo', colWidth: '150', title: '箱号', type: '<a>', command: 'showInfo', isCheck: true},
    {
      key: 'boxType',
      colWidth: '60',
      title: '箱型',
      type: 'filter',
      filter: {5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP'},
      isCheck: true
    },
    {
      key: 'boxCondition',
      colWidth: '60',
      title: '箱况',
      type: 'filter',
      filter: {5: '全新', 10: '次新', 15: '适货'},
      isCheck: true
    },
    {key: 'packingDate', colWidth: '100', title: '提箱日期', type: 'date', isCheck: true},
    {key: 'agentName', colWidth: '100', title: '客户', type: 'text', isCheck: true},
    {key: 'packingNo', colWidth: '180', title: '提箱单号', type: '<a>', isCheck: true},
    {key: 'yardName', colWidth: '100', title: '堆场名称', type: 'text', isCheck: true},
    {
      key: 'operate',
      colWidth: '140',
      title: '操作',
      type: 'operate',
      isCheck: true,
      fixed: 'right',
      buttons: [
        {
          // icon: 'Download',
          command: 'deleteItem',
          name: '删除'
        },
         {
          command: 'activEdit',
          name: '编辑',     
          // isShow: (row: any) => {
          //    return row.packingStatus < 20;
          // },
        },
      ],
    },
  ],
  // table配置项（必传）
  config: {
    isSelection: true,
    isList: false,
    isPagination: false, // 是否分页
    total: 0, // 分页总数
    loading: false
  },
});


const orderTypeval = ref("")
onMounted(() => {
  nextTick(() => {
    if(isAgent.value){
          orderTypeval.value = "5"
    }else{
           orderTypeval.value = "10"
    }
    getTableData()
    })

})


/*集装箱公司 查询提箱记录分页列表
* @param {Long} packingId 提箱单Id
* @param {String} packingNo 提箱单号
* @param {Integer} boxType 集装箱箱型 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
* @param {Integer} containerNo 集装箱箱号
* @param {Integer} boxCondition 集装箱箱况 5-全新   10-次新  15-适货
* @param {LocalDateTime} beginPackingDate  endPackingDate 提箱日期时间区间   
*/
const getTableData = () => {
  const {container, containerList} = formatContainerNo(param.containerNo);
  let data = {
    containerNo: container, // 单箱号查询
    containerNos: containerList, // 多箱号查询
    pageNum: param.pageNum,
    pageSize: param.pageSize,
    orderType: orderTypeval.value,
    packingNo: param.packingNo,
    boxType: param.boxType,
    boxCondition: param.boxCondition,
    agentName: param.agentName,
    yardName: param.yardName,
    containerClassify: param.containerClassify,
    companyName: param.companyName
  }
  if (param.packingDate) {
    console.log(param.packingDate)
    data.beginPackingDate = param.packingDate[0]
    data.endPackingDate = param.packingDate[1]
  }
  getboxDetailData(formData.value.id).then((res: any) => {
    table.data = res.data;
    // table.config.total = res.data.total;
  })
}

//删除  
const activDelete = (row: any) => {
  param.dialogVisible = true;
};
const tableRef = ref({});
const drawerData = ref({})
const typeDrawer=ref(1) //1详情 2编辑
//详情
const showInfo = (row: any) => {
  typeDrawer.value=1
  showInfoDeta(row)
};
//编辑
const activEdit = (row: any) => {
  typeDrawer.value=2
  showInfoDeta(row)
};
const showInfoDeta=(row)=>{
  getPackingDetailData(row.id).then((res: any) => {
    if (res.code == "00000") {
      drawerData.value = res.data
      param.drawer = true;
      if(typeDrawer.value==2 && isAgent.value){
        drawerData.value.detailFileList=JSON.parse(res.data.detailFileList)
      }
    } else {
      ElMessage.error(res.msg)
    }
  }).catch((err) => {
    console.log("ERROR:", err.msg)
  })
}
//编辑
const addBoxFileRef = ref()
const detaiClick=()=>{
  let data={
    id:drawerData.value.id,
  }
  if(isAgent.value){
    data.plateNumber=drawerData.value.plateNumber
    data.detailFileList=JSON.stringify(addBoxFileRef.value.fileList)
  }else{
    data.rentInPrice=drawerData.value.rentInPrice
    data.rentInCurrency=drawerData.value.rentInCurrency

  }
   details(data).then((res: any) => {
    if (res.code == "00000") {
      param.drawer = false;
      getTableData()
    } else {
      ElMessage.error(res.msg)
    }
  })
}
//分页
function onTablePageChange(page: any) {
  param.pageNum = page.pageNum;
  param.pageSize = page.pageSize;
  getTableData();
};


const isSelectAll = ref(true) // true:显示全选按钮  false：显示取消全选按钮
const allId = ref([]) // 使用全选功能时使用
const disableHeaderCheckbox = ref(false) // true:禁用表头全选/全取消 选择框 false:开启 表头全选/全取消 选择框
const isAllCheck = ref(false) //是否使用全选功能
const checkAll = ref([]) //点击全选按钮时 选中列表所有内容（包含当前页和所有后续页）


const updateSelectAll = (val) => {
  allId.value = val
}

// 删除
const deleteItem =(row: any) => { 
  ElMessageBox.confirm('确定要删除此纪录么？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deletePackingDetail([row.id]).then((res: any) => { 
      if(res.code != '00000'){
        ElMessage.warning(res.msg)
      }else{
        getTableData()
        ElMessage.success('删除成功！')
      }
    })
  }).catch(() => { });
}
</script>

<style lang="scss" scoped>
.el-form-diy {
  padding: 10px;

  div {
    width: 100%;
  }
}

.upload-img {
  :deep(.el-upload--picture-card) {
    display: none !important
  }
}
</style>
